<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<center>
    <div id="app">

        <div>
            <label>
                请根据用户名搜索用户数据：
                <input type="text" name="uname" v-model="name">
                <button @click="search()">搜索</button>
            </label>
        </div>

        <br>

        <table border="1px" cellpadding="15" cellspacing="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="person in persons">
                    <td>{{person.id}}</td>
                    <td>{{person.username}}</td>
                    <td>{{person.password}}</td>
                    <td>
                        <button>修改</button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button @click="del(person.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</center>
</body>

<script type="text/javascript">
    // 实例化vue对象
    let vm = new Vue({
        el: "#app",
        data: {
            persons: null,
            name: null
        },
        mounted(){
            axios.get("http://localhost:10086/person/get_all")
            .then((resp) => {
                // 判断是否获取数据成功
                console.log(resp);
                if (resp.data.statusCode == 20000) {
                    this.persons = resp.data.data;
                }else {
                    // 后端服务器内部错误
                    alert(resp.data.msg);
                }
            }).catch((error) => {});
        },
        methods: {
            search(){
                axios.post("http://localhost:10086/person/get_per/" + this.name)
                    .then((resp)=>{
                    // 判断请求是否成功获取数据
                    if (resp.data.statusCode == 20000) {
                        this.persons = [resp.data.data];
                    }else {
                        // 后端服务器内部错误
                        alert(resp.data.msg);
                    }
                }).catch((error) => {})
            },
            del(id){
                var flag = confirm("是否确定删除数据？");
                if (flag) {
                    axios.post("http://localhost:10086/person/del/" + id)
                        .then((resp)=>{
                            // 判断请求是否成功获取数据
                            if (resp.data.statusCode == 20000) {
                                alert("删除数据成功");
                                // 刷新页面
                                window.location.reload();
                            }else {
                                // 后端服务器内部错误
                                alert(resp.data.msg);
                            }
                        }).catch((error) => {})
                }
            }
        }
    });
</script>
</html>